<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="babel.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
  class MyTitle extends React.Component {
    constructor(...args) {
      super(...args);
      this.state = {
        text: 'World',
        isClicked:false
      };
    }

    handleClick() {
      var d = new Date();
      var yy  = d.getFullYear(); // 当前年份
      var mm = d.getMonth() + 1; // 当前月份
      var dd = d.getDate();
      var date =yy+"年"+mm+"月"+dd+"日";

      let isClicked =!this.state.isClicked;
      this.setState({
        isClicked:isClicked,
        text:isClicked ? date:'World'
      });
    }

    render() {
      return <h1 onClick={this.handleClick.bind(this)}>
        {'Hello ' + this.state.text}
      </h1>;
    }
  };

  ReactDOM.render(
    <MyTitle/>,
    document.getElementById('example')
  );
    </script>
  </body>
</html>
